<template>
  <div class="butL">
    <ul>
      <li
        v-for="itme in arr"
        :key="itme.id"
        :class="itme.id==num ? 'color' : '' "
        @click="exchange(itme.id)"
      >
        {{ itme.next }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { id: 1, next: "用户信息", path: "/system" },
        { id: 2, next: "视屏管理", path: "/system/butv" },
        { id: 3, next: "订单管理", path: "/system/butd" },
      ],
      num: 1,
    };
  },
  mounted(){
      this.exchange(this.num)
  },
  methods: {
    exchange(val) {
      this.num = val;
      this.$router.push(this.arr[val-1].path)
    },
  },
};
</script>

<style scoped lang="scss">
.butL {
  width: 180px;
  height: calc(100vh - 60px);
  background-color: #545c64;
  ul {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid #4480bc;
    .color {
      background-color: #4480bc;
      color: #fff;
    }
    li {
      height: 40px;
      width: 100%;
      text-align: center;
      line-height: 40px;
      color: #cdcdcd;
      transition: all 0.3s;
    }
    li:hover {
      cursor: pointer;
      background-color: #4480bc;
      color: #fff;
    }
  }
}
</style>